<template>
  <h1 class="row-title">普通卡片</h1>
  <div class="row">
    <ct-card
      img-src="/src/assets/image/JavaScript.png"
      summary="掌握三件套基础，进阶主流框架与工程化，聚焦性能优化与跨端开发，实现从入门到资深工程师的跨越"
      >234234</ct-card
    >
    <ct-card
      img-src="/src/assets/image/java.png"
      summary="深耕编程语言与数据库，精通高并发架构与分布式系统，保障安全与可观测性，构建稳定高效的服务端能力"
      object-fit="contain"
    ></ct-card>
    <ct-card
      img-src="/src/assets/image/ai.png"
      summary="夯实数学与Python基础，掌握机器学习与深度学习核心，实战CV/NLP/LLM，进阶MLOps与AI系统工程，紧跟技术前沿"
    ></ct-card>
  </div>
  <h1 class="row-title">默认插槽</h1>
  <div class="row">
    <ct-card img-src="/src/assets/image/devops.png">
      <span>夯实计算机与网络基础，掌握攻防技术与安全工具，从理论到实战构建防护体系</span>
    </ct-card>
    <ct-card img-src="/src/assets/image/gp.png" object-fit="contain">
      从基础命令与文件系统学起，进阶用户、磁盘、网络管理和Shell脚本自动化运维
    </ct-card>
    <ct-card img-src="/src/assets/image/spark.png">
      深入理解数据库系统原理，精通SQL优化与数据库管理，进阶分布式架构与内核机制
    </ct-card>
  </div>
  <h1 class="row-title">底部 footer 插槽</h1>
  <div class="row">
    <ct-card
      img-src="/src/assets/image/JavaScript.png"
      summary="掌握三件套基础，进阶主流框架与工程化，聚焦性能优化与跨端开发，实现从入门到资深工程师的跨越"
    >
      <template #footer>
        <span style="color: var(--ct-color-primary); margin: 3px 8px">查看详情</span>
      </template>
    </ct-card>
    <ct-card
      img-src="/src/assets/image/java.png"
      summary="深耕编程语言与数据库，精通高并发架构与分布式系统，保障安全与可观测性，构建稳定高效的服务端能力"
      object-fit="contain"
    >
      <template #footer>
        <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
          <span style="font-size: 12px; color: var(--ct-color-info)"
            ><b>中级</b>·<b>1000</b> 5432 人已报名</span
          >
          <span style="color: var(--ct-color-danger)">¥ {{ 399.0 }}</span>
        </div>
      </template>
    </ct-card>
    <ct-card
      img-src="/src/assets/image/ai.png"
      summary="夯实数学与Python基础，掌握机器学习与深度学习核心，实战CV/NLP/LLM，进阶MLOps与AI系统工程，紧跟技术前沿"
    >
      <template #footer>
        <span
          style="color: var(--ct-color-success); margin: 3px 8px; display: block; text-align: right"
          >已购买</span
        >
      </template>
    </ct-card>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
